import React, { useEffect, useRef, useState } from 'react'
import { Col, Row, Card, Table, Space, Modal } from 'antd';
import * as echarts from 'echarts';
export default function ProductManage() {
  const { Meta } = Card;
  const gaugeRef = useRef()
  const [gaugeChart, setGaugeChart] = useState(null)
  const gaugeRef1 = useRef()
  const [gaugeChart1, setGaugeChart1] = useState(null)
  const [open, setOpen] = useState(false);
  const gaugeData = [
    {
      value: 3,
      name: '设备在线数',

      itemStyle: {
        color: '#a0e07e'
      },
      title: {
        offsetCenter: ['0%', '-20%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '20%']
      }
    },

  ];
  const gaugeData1 = [
    {
      value: 3,
      name: '订单完成数',

      itemStyle: {
        color: '#a0e07e'
      },
      title: {
        offsetCenter: ['0%', '-20%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '20%']
      }
    },

  ];
  useEffect(() => {
    gauge()
    gauge1()
  }, [])
  const gauge = () => {
    var myChart
    if (!gaugeChart) {
      myChart = echarts.init(gaugeRef.current);
      setGaugeChart(myChart)
    } else {
      myChart = gaugeChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          data: gaugeData,
          max: 10,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#b4e899'
            }
          },
          axisLine: {
            lineStyle: {
              width: 15
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          title: {
            fontSize: 16,

          },
          detail: {
            width: 30,
            height: 10,
            fontSize: 20,
            formatter: '{value}/10'
          }
        }
      ]
    })
  }
  const gauge1 = () => {
    var myChart
    if (!gaugeChart1) {
      myChart = echarts.init(gaugeRef1.current);
    } else {
      myChart = gaugeChart1
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          data: gaugeData1,
          max: 10,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#b4e899'
            }
          },
          axisLine: {
            lineStyle: {
              width: 15
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          title: {
            fontSize: 16,

          },
          detail: {
            width: 30,
            height: 10,
            fontSize: 20,
            formatter: '{value}/10'
          }
        }
      ]
    })
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: "center",
      width: "10%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: '设备',
      dataIndex: 'pointtag',
      key: 'pointtag',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '设备id',
      dataIndex: 'pointvalue',
      key: 'pointvalue',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '数量',
      dataIndex: 'pointunit',
      key: 'pointunit',
      align: "center",
      render: (text) => {
        if (text != null) {
          return <span style={{ fontSize: "12px" }}>{text}</span>
        }
        return "无"
      }
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      fixed: 'right',
      align: "center",
      render: (text, item) => {
        return <Space>
          <a style={{ fontSize: "12px", color: "#4e9dfd" }} onClick={() => { showInfo() }}>查看</a>
        </Space>
      }
    }
  ];
  const columns1 = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: "center",
      width: "10%",
      render: (text, record, index) => {
        return <span style={{ fontSize: "12px" }}>{index + 1}</span>
      }
    },
    {
      title: '警告内容',
      dataIndex: 'pointtag',
      key: 'pointtag',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '警告时间',
      dataIndex: 'pointvalue',
      key: 'pointvalue',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },

  ];
  const CollectionCreateForm = ({ open, onCreate, onCancel }) => {

    return (
      <>
        <Table
          columns={columns1} dataSource={data} style={{ margin: "5px 0 0 0" }}
          rowKey={(item) => item.index}
          pagination={{ pageSize: 10 }}
          size='small'
        >
        </Table>
      </>

    );
  };
  const showInfo = () => {
    setOpen(true)
  }
  const data = [
    {
      id: 1,
      pointtag: "11",
      pointvalue: "12312321",
      pointunit: "13",
    }
  ]
  return (
    <div>
      <div style={{ height: "350px", display: "flex", background: "#f5f4f4" }}>
        <div style={{ flex: "1 1 200px", padding: "50px 0", border: "1px soild gray", background: 'white', borderRadius: '10px', margin: "10px 5px 10px 0" }}>
          <Row justify="space-evenly">
            <Col span={10} style={{ display: 'flex', justifyContent: 'center' }}>
              <Card
                hoverable
                style={{
                  width: "70%",
                  padding: "0 10%",
                  border: "1px solid #a0e07e",
                  background: "#f6ffed",
                }}
                cover={<div style={{ textAlign: "center", padding: "10px 0 0 0" }}><img style={{ width: "155px", height: "151px" }} alt="example" src={"images/appStart.png"} /></div>}
              >
                <Meta title="设备管理" style={{ textAlign: "center" }} />
              </Card>
            </Col>
            {/* <Col span={7}>
              <Card
                hoverable
                style={{
                  width: "100%",
                  padding: "0 10%",
                  border: "1px solid gray",
                  background: "#edeeec"
                }}
                cover={<div style={{ textAlign: "center", padding: "10px 0 0 0" }}><img style={{ width: "155px", height: "151px" }} alt="example" src={"images/appNoStart.png"} /></div>}
              >
                <Meta title="生产管理" style={{ textAlign: "center" }} />
              </Card>
            </Col> */}
            <Col span={10} style={{ display: 'flex', justifyContent: 'center' }}>
              <Card
                hoverable
                style={{
                  width: "70%",
                  padding: "0 10%",
                  border: "1px solid #a0e07e",
                  background: "#f6ffed"
                }}

                cover={<div style={{ textAlign: "center", padding: "10px 0 0 0" }}><img style={{ width: "155px", height: "151px" }} alt="example" src={"images/appStart.png"} /></div>}
              >
                <Meta title="运营管理" style={{ textAlign: "center" }} />
              </Card>
            </Col>
          </Row>
        </div>
        <div style={{ flex: "1 1 100px", display: 'flex', background: 'white', borderRadius: '10px', margin: "10px 0 10px 5px" }}>
          <div style={{ flex: "1 1 200px", }}>
            <div ref={gaugeRef} style={{ height: "190px", width: "100%", lineHeight: "190px" }}>

            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ width: "150px", height: '120px', textAlign: 'center', borderRadius: '10px', border: "1px solid #a0e07e", background: "#f6ffed" }}>
                <div style={{ height: "40px", fontSize: '20px', lineHeight: "60px", fontWeight: "bold" }}>设备数据总数</div>
                <div style={{ height: "80px", fontSize: "16px", lineHeight: "80px" }}>11条</div>
              </div>
            </div>
          </div>
          <div style={{ flex: "1 1 200px" }}>
            <div ref={gaugeRef1} style={{ height: "190px", width: "100%", lineHeight: "190px" }}>

            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ width: "150px", height: '120px', textAlign: 'center', borderRadius: '10px', border: "1px solid #a0e07e", background: "#f6ffed" }}>
                <div style={{ height: "40px", fontSize: '20px', lineHeight: "60px", fontWeight: "bold" }}>设备总数</div>
                <div style={{ height: "80px", fontSize: "16px", lineHeight: "80px" }}>11</div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div style={{ width: "100%" }}>
        <Table
          columns={columns} dataSource={data} style={{ margin: "5px 0 0 0" }}
          rowKey={(item) => item.index}
          pagination={{ pageSize: 10 }}
          size='small'
        >
        </Table>
      </div>
      <Modal
        open={open}
        title={"11"}
        width={"1000px"}
        height={"500px"}
        footer={null}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <CollectionCreateForm
        />
      </Modal>
    </div >
  )
}
